iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

從點擊到顯示:深度解析網頁運作的神秘之旅系列 第 8

JavaScript 中的 Object 使用方法深度解析

  • 分享至 

  • xImage
  •  

在 JavaScript 中,Object是我們很常拿來使用的資料結構。

無論您是初學者還是資深開發者,了解 Object 提供的方法都蠻幫助你在程式碼上寫的更乾淨。讓我們來詳細探討 Object 的各種方法,並為每一個提供實際的代碼示例。


Object.entries() 方法返回一個給定對象自身可列舉屬性的key-value陣列。
Object.values() 方法返回一個給定對象自身可列舉屬性的value陣列陣列。
Object.keys 方法返回一個給定對象自身可列舉屬性的key陣列。

const a = {b:1,c:2,d:3}
console.log(Object.keys(a))
console.log(Object.values(a))
console.log(Object.entries(a))

output: ['b', 'c', 'd'] [1, 2, 3] [['b', 1],['c', 2],['d', 3]]


Object.fromEntries() 方法是 Object.entries() 的反向操作,從鍵值對數組創建對象。

const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj);

output:{ name: 'John', age: 30 }


以下介紹一些在一些前人開發的舊專案,一些語法可以參考


Object.assign()方法用於將所有可列舉屬性的值從一個或多個Object覆制到目標Object。
它將返回目標對象。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target);//{ a: 1, b: 2, c: 3 }

Object.defineProperties() 和 Object.defineProperty()
這兩個方法允許精確地添加或修改對象上的屬性。defineProperties 可以同時定義多個屬性。

Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
});

Object.defineProperty(obj, 'property3', {
  value: 'I am property3',
  writable: true
});

console.log(obj.property2);// 'Hello'

Object.freeze() 方法凍結一個對象,使其不再能添加、刪除或修改屬性。

const frozenObj = Object.freeze({ prop: 42 });
frozenObj.prop = 33;

output:42


Object.getOwnPropertyDescriptor() 和 Object.getOwnPropertyDescriptors()
這兩個方法用於獲取對象屬性的描述符。前者用於獲取單個屬性的描述符,後者可以獲取對象上所有自有屬性的描述符。

const obj = { prop: 42 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'prop');

console.log(descriptor.value);  // 42
console.log(descriptor.writable);  // true

const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop.value);  // 42

Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols()
這兩個方法返回一個陣列,分別包含物件上所有自有的屬性名和符號。

const obj = { a: 1, [Symbol('b')]: 2 };
console.log(Object.getOwnPropertyNames(obj));  // ['a']
console.log(Object.getOwnPropertySymbols(obj));  // [Symbol(b)]


上一篇
深度優化圖片(2):如何實作圖片載入優化
系列文
從點擊到顯示:深度解析網頁運作的神秘之旅8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言